<template>
	<gui-page ref="guipage">
		<template v-slot:gBody>
			<gui-page-loading ref="loadingRef">
				<text class="gui-block gui-text-small gui-text-center gui-color-gray gui-italic"
					style="padding-top:10rpx;">loading ...</text>
			</gui-page-loading>
			<view class="main">
				<gui-a-header title="在线简历"></gui-a-header>
				<view class="warp no_curriculum_warp" v-if="!isCreate">
					<image class="no_curriculum" src="@/static/image/no_curriculum_vitae.png" mode="widthFix">
					</image>
					<view class="txt gui-bold f32 mt40">
						您还未创建简历
					</view>
					<view class="no_btn_warp">
						<button class="saveBtn" @click="creatFun">创建简历</button>
						<view class="txt c999 mt20 f26 center" @click="$u.back()">
							返回个人中心
						</view>
					</view>
				</view>
				<view class="warp" v-if="isCreate">
					<view class="header-warp">
						<view class="info gui-flex cfff">
							<image class="tx_image" :src="cvData.userImg" mode="aspectFill"></image>
							<view class="info-con">
								<view class="f32" :class="[(cvData.userSex == 1) ? 'name' : 'man']">
									{{cvData.userName}}
								</view>
								<view class="sgin f20 mt10">
									{{cvData.userAge}}岁 | {{cvData.workTime}} | {{cvData.workStatus}}
								</view>
								<view class="sgin f20 mt10">
									<text class="gui-icons">&#xe629;</text>
									<text>{{maskPhoneNumber(cvData.userPhone)}}</text>
									<text class="bai-icons"
										style="margin-left: 10rpx;">&#xe908;</text>{{cvData.userEmail}}
								</view>
							</view>
						</view>
						<view class="gui-flex gui-align-items-center gui-column gui-align-items-end gui-flex1">
							<view class="right_tool f20" v-if="pageType == 'defult'"
								@click="$u.to(`/pages/mine/curriculumVitae/curriculum-vitae-form`)">
								编辑简历<text class="gui-icons">&#xe69e;</text>
							</view>
							<view class="right_tool f20" v-if="pageType == 'firm'"
								:class="{'check': cvData.shFollow == 1}" @click="followFun()">
								{{(cvData.shFollow == 0) ? '人才关注' : '已关注'}}<text
									class="gui-icons ml8 cfff">&#xe6ad;</text>
							</view>
							<view class="right_tool f20 mt15" v-if="pageType == 'firm' && cvData.shPhone == 1"
								@click="callPhone">
								一键拨号<text class="bai-icons">&#xe625;</text>
							</view>
							<view class="right_tool f20 mt15" v-else-if="pageType == 'firm' && cvData.shPhone == 0"
								@click="applyContact">
								申请联系<text class="bai-icons">&#xe625;</text>
							</view>
						</view>
					</view>
					<view class="zw_10"></view>
					<view class="card bgfff">
						<view class="title-img flex-ac">
							<image src="@/static/image/userInfo.png" mode="widthFix" style="height: auto;"></image>
							<text class="f28 gui-bold">个人信息</text>
						</view>
						<view class="card-row gui-flex mt30 f24">
							<view class="label gui-bold">
								学历：
							</view>
							<view class="val">
								{{cvData.education}}
							</view>
						</view>
						<view class="card-row gui-flex mt15 f24">
							<view class="label gui-bold">
								现居地：
							</view>
							<view class="val">
								江苏-徐州-{{cvData.nowAddress}}
							</view>
						</view>
						<view class="card-row gui-flex mt15 f24">
							<view class="label gui-bold">
								户籍所在地：
							</view>
							<view class="val">
								{{cvData.oldAddress}}
							</view>
						</view>
						<view class="card-row gui-flex mt15 f24">
							<view class="label gui-bold">
								残疾证号：
							</view>
							<view class="val">
								{{cvData.physicalNo}}
							</view>
						</view>
						<view class="card-row gui-flex mt15 f24">
							<view class="label gui-bold">
								残疾类别：
							</view>
							<view class="val">
								{{cvData.physicalType}}
							</view>
						</view>
						<view class="card-row gui-flex mt15 f24">
							<view class="label gui-bold">
								残疾等级：
							</view>
							<view class="val">
								{{cvData.physicalGrade}}
							</view>
						</view>
						<view class="card-row gui-flex mt15 f24" v-if="cvData.physicalType == '肢体残疾'">
							<view class="label gui-bold">
								肢体残疾部位：
							</view>
							<view class="val">
								{{cvData.physicalPart}}
							</view>
						</view>
						<view class="card-row gui-flex mt15 f24" v-if="cvData.physicalType == '多重残疾'">
							<view class="label gui-bold">
								多重残疾情况：
							</view>
							<view class="val">
								{{cvData.physicalTypeVar}}
							</view>
						</view>
					</view>
					<view class="zw_10"></view>
					<view class="card bgfff">
						<view class="title-img flex-ac">
							<image src="@/static/image/jyjl.png" mode="widthFix" style="height: auto;"></image>
							<text class="f28 gui-bold">教育经历</text>
						</view>
					</view>
					<view class="card bgfff" v-if="cvData.comUserEducationList.length <= 0">
						<gui-empty>
							<template v-slot:img>
								<view class="gui-flex gui-rows gui-justify-content-center">
									<image class="nodata-img" style="margin-top: 50rpx;"
										src="@/static/image/no_curriculum_vitae.png" mode="widthFix">
									</image>
								</view>
							</template>
							<template v-slot:text>
								<text
									class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">未添加</text>
								<view style="height: 100rpx;">

								</view>
							</template>
						</gui-empty>
					</view>
					<view class="block" v-else>
						<view class="card bgfff pb20"
							:class="{'bot_line' : (index+1) < cvData.comUserEducationList.length}"
							v-for="(item, index) in cvData.comUserEducationList" :key="item.id">
							<view class="block">
								<view class="card-row gui-flex gui-space-between mt30 f24">
									<view class="label gui-bold">
										{{item.schoolName}}
									</view>
									<view class="val">
										{{item.startTime}}~{{item.endTime}}
									</view>
								</view>
								<view class="card-row gui-flex mt15 f24">
									<view class="label gui-bold">
										专业：
									</view>
									<view class="val">
										{{item.speciality}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="zw_10"></view>
					<view class="card bgfff">
						<view class="title-img flex-ac">
							<image src="@/static/image/qzyx.png" mode="widthFix" style="height: auto;"></image>
							<text class="f28 gui-bold">求职意向</text>
						</view>
					</view>
					<view class="card bgfff" v-if="cvData.comUserJobHuntList.length <= 0">
						<gui-empty>
							<template v-slot:img>
								<view class="gui-flex gui-rows gui-justify-content-center">
									<image class="nodata-img" style="margin-top: 50rpx;"
										src="@/static/image/no_curriculum_vitae.png" mode="widthFix">
									</image>
								</view>
							</template>
							<template v-slot:text>
								<text
									class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">未添加</text>
								<view style="height: 100rpx;">

								</view>
							</template>
						</gui-empty>
					</view>
					<view class="block" v-else>
						<view class="card bgfff pb20"
							:class="{'bot_line' : (index+1) < cvData.comUserJobHuntList.length}"
							v-for="(item, index) in cvData.comUserJobHuntList" :key="item.id">
							<view class="block">
								<view class="card-row gui-flex mt30 f24">
									<view class="label gui-bold">
										行业：
									</view>
									<view class="val">
										{{item.industry}}
									</view>
								</view>
								<view class="card-row gui-flex mt15 f24">
									<view class="label gui-bold">
										岗位：
									</view>
									<view class="val">
										{{item.postName}}
									</view>
								</view>
								<view class="card-row gui-flex mt15 f24">
									<view class="label gui-bold">
										薪资：
									</view>
									<view class="val">
										{{item.moneyPages}}
									</view>
								</view>
								<view class="card-row gui-flex mt15 f24">
									<view class="label gui-bold">
										地点：
									</view>
									<view class="val">
										{{item.addressName}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="zw_10"></view>
					<view class="card bgfff" style="padding-bottom: 10rpx;">
						<view class="title-img flex-ac">
							<image src="@/static/image/jyjl.png" mode="widthFix" style="height: auto;"></image>
							<text class="f28 gui-bold">工作经历</text>
						</view>
					</view>
					<view class="card bgfff" v-if="cvData.comUserCompanyList.length <= 0">
						<gui-empty>
							<template v-slot:img>
								<view class="gui-flex gui-rows gui-justify-content-center">
									<image class="nodata-img" style="margin-top: 50rpx;"
										src="@/static/image/no_curriculum_vitae.png" mode="widthFix">
									</image>
								</view>
							</template>
							<template v-slot:text>
								<text
									class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">未添加</text>
								<view style="height: 100rpx;">

								</view>
							</template>
						</gui-empty>
					</view>
					<view class="block">
						<view class="card bgfff pb20"
							:class="{'bot_line' : (index+1) < cvData.comUserCompanyList.length}"
							style="padding-top: 10rpx;" v-for="(item, index) in cvData.comUserCompanyList"
							:key="item.id">
							<view class="card-row gui-flex gui-space-between mt30 f24">
								<view class="label gui-bold">
									{{item.companyName}}
								</view>
								<view class="val">
									{{item.startTime}}~{{item.endTime}}
								</view>
							</view>
							<view class="card-row gui-flex mt15 f24">
								<view class="label gui-bold">
									岗位：
								</view>
								<view class="val">
									{{item.postName}}
								</view>
							</view>
							<view class="card-row gui-flex mt15 f24">
								<view class="val">
									内容：{{item.context}}
								</view>
							</view>
						</view>
					</view>

					<view style="height: 100rpx;"></view>
					<view class="btn_xf" @click="xfButton">
						<text class="bai-icons colorBlue" v-if="pageType == 'firm'">&#xe625;</text>
						<text class="gui-icons" v-else>&#xe69e;</text>
					</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		getUserInfoShNull
	} from '@/api/user.js';
	import {
		getUserInForOne,
		getUserFollowUp,
		sendUserMessageInfo
	} from '@/api/company.js';

	import {
		useUserStore
	} from '@/stores/user.js'
	import {
		onLoad,
		onReady,
		onUnload
	} from '@dcloudio/uni-app'
	const loadingRef = ref(null);
	const store = useUserStore()
	const {
		isLogin,
		isHideTabbar,
		isApplyfor
	} = storeToRefs(store)

	const $u = reactive(inject('$u'));
	const isCreate = ref(false);
	const cvData = ref({})
	const pageType = ref('defult')

	onLoad((option) => {
		if (option.type && option.type == 'firm') {
			pageType.value = 'firm';
			getUserInForOneFun(option.id);
		} else {
			uni.$on('curriculumUpdate', () => {
				loadDetails();
			})
			loadDetails();
		}

	})

	onReady(() => {
		loadingRef.value.open();
	})

	onUnload(() => {
		uni.$off('curriculumUpdate')
	})
	
	// 发起申请
	const applyContact = () => {
		sendUserMessageInfo({
			refUserId: cvData.value.refUserId
		}).then(res => {
			if (res.code == 200) {
				$u.msg("已发起申请，等待用户同意后可以进行联系")
			}
		})
	}

	const maskPhoneNumber = (phoneNumber) => {
		return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
	}

	const creatFun = () => {
		if (isApplyfor.value) {
			$u.msg("您已经申请成为企业，请耐心等待审核")
			return;
		}
		$u.to(`/pages/mine/curriculumVitae/curriculum-vitae-form?type=add`)
	}

	const loadDetails = () => {
		getUserInfoShNull().then(res => {
			if (res.code == 200 && res.data) {
				isCreate.value = true;
				cvData.value = res.data;
			} else {
				isCreate.value = false;
			}
		}).finally(e => {
			loadingRef.value.close();
		})
	}

	const getUserInForOneFun = (id) => {
		getUserInForOne({
			id
		}).then(res => {
			if (res.code == 200 && res.data) {
				isCreate.value = true;
				cvData.value = res.data;
			} else {
				isCreate.value = false;
			}
		}).finally(e => {
			loadingRef.value.close();
		})
	}

	const followFun = () => {
		getUserFollowUp({
			refCustomId: cvData.value.refUserId
		}).then(res => {
			if (res.code == 200) {
				if (cvData.value.shFollow == 1) {
					cvData.value.shFollow = 0;
					$u.msg('已取消关注')
				} else {
					cvData.value.shFollow = 1;
					$u.msg('已关注')
				}
			}
		})
	}

	const callPhone = () => {
		$u.makePhone(cvData.value.userPhone.toString());
	}

	const xfButton = () => {
		if (pageType.value == 'defult') {
			$u.to(`/pages/mine/curriculumVitae/curriculum-vitae-form`)
		} else if (pageType.value == 'firm') {
			callPhone();
		}
	}
</script>

<style lang="scss">
	.main {
		position: relative;
	}

	.btn_xf {
		position: fixed;
		right: 20rpx;
		bottom: 300rpx;
		width: 90rpx;
		height: 90rpx;
		background: rgba(64, 114, 254, 0.3);
		border-radius: 45rpx;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;

		.gui-icons {
			font-size: 40rpx;
			color: #4072FE;
		}
	}

	.header-warp {
		width: 750rpx;
		height: 230rpx;
		background: #4072FE;
		border-radius: 0px 0px 0px 0px;
		display: flex;
		align-items: center;
		padding: 0 47rpx;
		box-sizing: border-box;
	}

	.tx_image {
		width: 113rpx;
		height: 113rpx;
		border-radius: 18rpx;
	}

	.info-con {
		padding-left: 30rpx;
	}

	.name::after {
		content: '女士';
		font-size: 20rpx;
	}

	.man::after {
		content: '先生';
		font-size: 20rpx;
	}

	.right_tool {
		width: 125rpx;
		height: 50rpx;
		background: #0034C7;
		border-radius: 14rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.zw_10 {
		width: 100%;
		height: 10rpx;
		background: #f8f9fd;
	}

	.card {
		padding: 10rpx 42rpx 10rpx 42rpx;
	}

	.mt15 {
		margin-top: 15rpx;
	}

	.title-img {
		padding-top: 26rpx;
	}

	.title-img image {
		width: 32rpx;
		height: auto;
	}

	.bot_line {
		border-bottom: 1rpx dashed #CCCCCC;
	}

	.no_curriculum_warp {
		padding-top: 181rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.no_btn_warp {
			margin-top: 92rpx;
		}

		.saveBtn {
			width: 654rpx;
		}
	}

	.no_curriculum {
		width: 450rpx;
		height: auto;
	}

	.center {
		text-align: center;
	}

	.pb20 {
		padding-bottom: 30rpx;
	}
</style>